<template>
  <div class="container">
    <div class="year-sl">
      <MySelect v-model="selectedYear">
        <MyOption
          v-for="year in yearRange"
          :key="year"
          :label="year"
          @click="handleYearClick"
        />
      </MySelect>
    </div>
    <div class="month-sl">
      <MySelect v-model="selectedMonth">
        <MyOption
          v-for="month in monthArr"
          :key="month"
          :label="month"
          @click="handleMonthClick"
        />
      </MySelect>
    </div>
    <div class="today-bt">
      <button @click="handleTodayClick">今天</button>
    </div>
    <div
      class="add"
      @click="handleAddClick"
    >
      >
    </div>
    <div
      class="sub"
      @click="handleSubClick"
    >
      <
    </div>
  </div>
</template>

<script setup>
import MySelect from './MySelect.vue';
import MyOption from './MyOption.vue';

import { computed } from 'vue';

import { useCounterStore } from '../stores/counter.js';

const yearRange = useCounterStore().yearRange;
const monthArr = useCounterStore().monthArr;

const selectedYear = computed(() => {
  return useCounterStore().selectedYear;
});

//选中的月份
const selectedMonth = computed(() => {
  return useCounterStore().selectedMonth;
});

const handleYearClick = (year) => {
  useCounterStore().setSelectedYear(year);
};

const handleMonthClick = (month) => {
  useCounterStore().setSelectedMonth(month);
};

const handleTodayClick = () => {
  useCounterStore().setSelectedYear(new Date().getFullYear());
  useCounterStore().setSelectedMonth(new Date().getMonth() + 1);
};

const handleAddClick = () => {
  useCounterStore().setSelectedMonthAdd();
};

const handleSubClick = () => {
  useCounterStore().setSelectedMonthSub();
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px 8px 0 0;

  background: linear-gradient(to top, #fff, #4169e1);
}

.today-bt {
  padding: 0 8px;
}

button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  color: #000;
  background-color: white;
}

button:hover {
  background-color: #4169e1;
  color: #fff;
  cursor: pointer;
}

.add {
  position: absolute;
  font-size: 24px;
  height: 24px;
  line-height: 24px;

  transform: translateX(60px);
  font-weight: 100;
  color: #ccc;
  user-select: none;
}

.sub {
  position: absolute;
  font-size: 24px;
  height: 24px;
  line-height: 24px;
  transform: translateX(-40px);
  font-weight: 100;
  color: #ccc;
  user-select: none;
}

.sub:hover {
  color: #000;
  cursor: pointer;
}

.add:hover {
  color: #000;
  cursor: pointer;
}
</style>
